<template>
  <div class="register-container">
    <div class="register-content">
      <div class="register-left">
        <h1 class="system-title">实验室设备管理系统</h1>
        <p class="system-desc">高效、便捷的实验室设备管理解决方案</p>
      </div>
      <div class="register-right">
        <a-card class="register-card" :bordered="false">
          <h2 class="register-title">用户注册</h2>
          <a-form
            :model="formState"
            name="register"
            @finish="onFinish"
            :rules="rules"
            autocomplete="off"
          >
            <a-form-item name="userId">
              <a-input
                v-model:value="formState.userId"
                placeholder="请输入用户账号"
                size="large"
              >
                <template #prefix>
                  <UserOutlined />
                </template>
              </a-input>
            </a-form-item>

            <a-form-item name="username">
              <a-input
                v-model:value="formState.username"
                placeholder="请输入用户名"
                size="large"
              >
                <template #prefix>
                  <UserOutlined />
                </template>
              </a-input>
            </a-form-item>

            <a-form-item name="passwordHash">
              <a-input-password
                v-model:value="formState.passwordHash"
                placeholder="请输入密码"
                size="large"
              >
                <template #prefix>
                  <LockOutlined />
                </template>
              </a-input-password>
            </a-form-item>

            <a-form-item name="confirmPassword">
              <a-input-password
                v-model:value="formState.confirmPassword"
                placeholder="请确认密码"
                size="large"
              >
                <template #prefix>
                  <LockOutlined />
                </template>
              </a-input-password>
            </a-form-item>

            <a-form-item name="role">
              <a-select
                v-model:value="formState.role"
                placeholder="请选择角色"
                size="large"
              >
                <a-select-option value="ADMIN">管理员</a-select-option>
                <a-select-option value="USER">普通用户</a-select-option>
              </a-select>
            </a-form-item>

            <a-form-item>
              <a-button type="primary" html-type="submit" block size="large">
                注册
              </a-button>
            </a-form-item>

            <div class="login-link">
              已有账号？
              <router-link to="/login">立即登录</router-link>
            </div>
          </a-form>
        </a-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { message } from 'ant-design-vue'
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
import { useRouter } from 'vue-router'
import axios from 'axios'

const router = useRouter()

const formState = reactive({
  userId: '',
  username: '',
  passwordHash: '',
  confirmPassword: '',
  role: undefined
})

const validateConfirmPassword = async (rule, value) => {
  if (value !== formState.passwordHash) {
    throw new Error('两次输入的密码不一致')
  }
}

const rules = {
  userId: [
    { required: true, message: '请输入用户账号' },
    { min: 6, message: '用户账号至少6位' }
  ],
  username: [
    { required: true, message: '请输入用户名' }
  ],
  passwordHash: [
    { required: true, message: '请输入密码' },
    { 
      pattern: /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{6,}$/,
      message: '密码必须包含字母、数字和特殊符号，且至少6位'
    }
  ],
  confirmPassword: [
    { required: true, message: '请确认密码' },
    { validator: validateConfirmPassword }
  ],
  role: [
    { required: true, message: '请选择角色' }
  ]
}

const onFinish = async (values) => {
  try {
    const { confirmPassword, ...registerData } = values
    const response = await axios.post('http://localhost:8080/api/register', registerData)
    if (response.data.success) {
      message.success('注册成功')
      router.push('/login')
    }
  } catch (error) {
    message.error('注册失败：' + (error.response?.data?.message || '未知错误'))
  }
}
</script>

<style scoped>
.register-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #1890ff 0%, #36cfc9 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.register-content {
  width: 100%;
  max-width: 1200px;
  display: flex;
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.register-left {
  flex: 1;
  padding: 48px;
  background: linear-gradient(135deg, #1890ff 0%, #36cfc9 100%);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.system-title {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 24px;
}

.system-desc {
  font-size: 18px;
  opacity: 0.9;
}

.register-right {
  flex: 1;
  padding: 48px;
  display: flex;
  align-items: center;
}

.register-card {
  width: 100%;
  background: transparent;
  box-shadow: none;
}

.register-title {
  font-size: 28px;
  font-weight: bold;
  color: #1890ff;
  text-align: center;
  margin-bottom: 32px;
}

.login-link {
  text-align: center;
  margin-top: 16px;
}

.login-link a {
  color: #1890ff;
}

/* 响应式布局 */
@media screen and (max-width: 768px) {
  .register-content {
    flex-direction: column;
  }

  .register-left {
    padding: 32px;
    text-align: center;
  }

  .system-title {
    font-size: 28px;
  }

  .system-desc {
    font-size: 16px;
  }

  .register-right {
    padding: 32px;
  }

  .register-title {
    font-size: 24px;
  }
}
</style> 